@function initMarginAndPadding($px, $prefix) {
    @return #{$prefix}-#{$px};
}

@for $i from 1 through 20 {
    .#{initMarginAndPadding($i, 'ml')} {
        margin-left: #{$i}px;
    }

    .#{initMarginAndPadding($i, 'mr')} {
        margin-right: #{$i}px;
    }

    .#{initMarginAndPadding($i, 'mt')} {
        margin-top: #{$i}px;
    }

    .#{initMarginAndPadding($i, 'mb')} {
        margin-bottom: #{$i}px;
    }

    .#{initMarginAndPadding($i, 'pl')} {
        padding-left: #{$i}px;
    }

    .#{initMarginAndPadding($i, 'pr')} {
        padding-right: #{$i}px;
    }

    .#{initMarginAndPadding($i, 'pt')} {
        padding-top: #{$i}px;
    }

    .#{initMarginAndPadding($i, 'pb')} {
        padding-bottom: #{$i}px;
    }
}

.full-height {
    height: 100%;
}

.full-width {
    width: 100%;
}

.flex-x-end {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
}

.flex-x-center {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.flex-x-start {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.flex-x-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.red-text {
    color: var(--el-color-primary)
}